<template>
  <div id="appStatisticPage">
    <!-- 第一行：热门应用柱状图 & Top5答题量雷达图 -->
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <h2>热门应用统计</h2>
        <v-chart
          :option="appAnswerCountOptions"
          style="height: 300px; width: 100%;"
        />
      </a-col>
      <a-col :span="12">
        <div v-if="appAnswerCountList.length">
          <h2>Top 5 应用答题量雷达图</h2>
          <v-chart
            :option="top5RadarOptions"
            style="height: 300px; width: 100%;"
          />
        </div>
        <div v-else class="empty-state">
          <p>正在加载热门应用数据…</p>
        </div>
      </a-col>
    </a-row>

    <!-- 第二行：应用结果饼图 & 结果分布雷达图 -->
    <a-row :gutter="[16, 16]" style="margin-top: 24px;">
      <a-col :span="12">
        <h2>应用结果统计</h2>
        <div class="search-bar">
          <a-input-search
            :style="{ width: '100%' }"
            placeholder="输入 appId"
            button-text="搜索"
            size="large"
            search-button
            @search="loadAppAnswerResultCountData"
          />
        </div>
        <div style="margin-bottom: 16px" />
        <v-chart
          :option="appAnswerResultCountOptions"
          style="height: 300px; width: 100%;"
        />
      </a-col>
      <a-col :span="12">
        <div v-if="appAnswerResultCountList.length">
          <h2>应用结果分布雷达图</h2>
          <v-chart
            :option="resultRadarOptions"
            style="height: 300px; width: 100%;"
          />
        </div>
        <div v-else class="empty-state">
          <p>请输入 appId 并点击“搜索”以查看结果分布雷达图</p>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import VChart from "vue-echarts";
import "echarts";
import API from "@/api";
import {
  getAppAnswerCountUsingGet,
  getAppAnswerResultCountUsingGet,
} from "@/api/appStatisticController";
import message from "@arco-design/web-vue/es/message";

const appAnswerCountList = ref<API.AppAnswerCountDTO[]>([]);
const appAnswerResultCountList = ref<API.AppAnswerResultCountDTO[]>([]);

// 加载热门应用答题量
const loadAppAnswerCountData = async () => {
  const res = await getAppAnswerCountUsingGet();
  if (res.data.code === 0) {
    appAnswerCountList.value = res.data.data || [];
  } else {
    message.error("获取数据失败：" + res.data.message);
  }
};

// 加载指定 appId 的结果分布
const loadAppAnswerResultCountData = async (appId: string) => {
  if (!appId) return;
  const res = await getAppAnswerResultCountUsingGet({ appId: appId as any });
  if (res.data.code === 0) {
    appAnswerResultCountList.value = res.data.data || [];
  } else {
    message.error("获取数据失败：" + res.data.message);
  }
};

// —— 图1：热门应用柱状图 —— //
const appAnswerCountOptions = computed(() => ({
  xAxis: {
    type: "category",
    data: appAnswerCountList.value.map((i) => i.appId),
    name: "应用 ID",
  },
  yAxis: {
    type: "value",
    name: "答题数",
  },
  series: [
    {
      data: appAnswerCountList.value.map((i) => i.answerCount),
      type: "bar",
    },
  ],
}));

// —— 图2：Top 5 应用答题量雷达图 —— //
const top5RadarOptions = computed(() => {
  const top5 = [...appAnswerCountList.value]
    .sort((a, b) => b.answerCount - a.answerCount)
    .slice(0, 5);
  const values = top5.map((i) => i.answerCount);
  const maxCount = values.length ? Math.max(...values) : 0;
  return {
    tooltip: {},
    legend: { data: ["答题量"] },
    radar: {
      indicator: top5.map((i) => ({ name: i.appId, max: maxCount })),
      shape: "circle",
      radius: "60%",
    },
    series: [
      {
        name: "Top 5 应用答题量",
        type: "radar",
        data: [{ value: values, name: "答题量" }],
      },
    ],
  };
});

// —— 图3：应用结果分布饼图 —— //
const appAnswerResultCountOptions = computed(() => ({
  tooltip: { trigger: "item" },
  legend: { orient: "vertical", left: "left" },
  series: [
    {
      name: "结果分布",
      type: "pie",
      radius: "50%",
      data: appAnswerResultCountList.value.map((i) => ({
        value: i.resultCount,
        name: i.resultName,
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
}));

// —— 图4：应用结果分布雷达图 —— //
const resultRadarOptions = computed(() => {
  const list = appAnswerResultCountList.value;
  const values = list.map((i) => i.resultCount);
  const maxVal = values.length ? Math.max(...values) : 0;
  return {
    tooltip: {},
    legend: { data: ["分布"] },
    radar: {
      indicator: list.map((i) => ({ name: i.resultName, max: maxVal })),
      shape: "circle",
      radius: "60%",
    },
    series: [
      {
        name: "结果分布",
        type: "radar",
        data: [{ value: values, name: "分布" }],
      },
    ],
  };
});

onMounted(() => {
  loadAppAnswerCountData();
});
</script>

<style scoped>
#appStatisticPage {
  max-width: 1200px;
  margin: auto;
  padding: 16px;
}
.search-bar {
  margin-bottom: 8px;
}
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #888;
  font-size: 14px;
}
</style>
